<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <title>查看场馆</title>
</head>
<body>
<div id="app">
    <el-container>
        <!--顶栏-->
<!--        <el-header>-->
<!--            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">-->
<!--                <el-menu-item index="1"><a href="userHome.html">个人中心</a></el-menu-item>-->
<!--                <el-menu-item index="2"><a href="venueSearch.html">所有场馆</a></el-menu-item>-->
<!--                <el-menu-item index="3"><a href="allCoach.html">所有教练</a></el-menu-item>-->
<!--                <el-menu-item index="4"><a href="article.html">论坛</a></el-menu-item>-->
<!--            </el-menu>-->
<!--            <div class="line"></div>-->
<!--        </el-header>-->

<!--        <el-header>-->
<!--            <el-breadcrumb separator="">-->
<!--                <el-breadcrumb-item :to="{ path: './homePage.html' }">首页</el-breadcrumb-item>-->
<!--                <el-breadcrumb-item><a href="./accountCenter.html">个人中心</a></el-breadcrumb-item>-->
<!--                <el-breadcrumb-item><a href="./coachSearch.html">查看教练</a></el-breadcrumb-item>-->
<!--                <el-breadcrumb-item><a href="./venueSearch.html">查看场馆</a></el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
<!--        </el-header>-->
        <el-main>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="场馆名">
                    <el-input v-model="formInline.condition" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="venue" border>
                <!--                <el-table-column prop="link" label="场馆图片">-->

                <!--                </el-table-column>-->

                <el-table-column align="center" label="图片(点击可放大)" width="140px">
                    <template slot-scope="scope" align="center">
                                <span>
                                    <img @click="bigger(scope.row.link)" :src="scope.row.link"
                                         style="width: 100px;height: 100px;">
                                </span>
                    </template>
                </el-table-column>
                <el-table-column prop="accountName" label="场馆账号">
                </el-table-column>

                <el-table-column prop="name" label="场馆名称">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="email" label="场馆邮箱">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showCheck(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
    <el-dialog
            title="查看场馆详情"
            :visible.sync="dialogVisible"
            width="80%">
        <!--        <span>{{check.link}}</span><br>-->
        <span>联系电话：{{check.phone}}</span><br>
        <span>经纬度：{{check.longitude}}&nbsp;&nbsp;&nbsp;&nbsp;{{check.latitude}}</span><br>
        <template>
            <el-table
                    :data="coach"
                    style="width: 100%">
                <el-table-column
                        prop="realname"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="style"
                        label="流派"
                        width="180">
                </el-table-column>
            </el-table>
        </template>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog title="场馆图片"
               :visible.sync="showBigImg"
               width="300px">
        <img :src="bigImg"
             style="width: 250px;height: 250px;">

    </el-dialog>

    <!--分页-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.currentPage"
                :page-sizes="[3, 4]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
        </el-pagination>
    </div>

</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                pageInfo: {
                    currentPage: 1,// 当前页
                    size: 3,// 每页多少条
                    total: 1// 总条目数
                },
                bigImg: "",
                showBigImg: false,
                venue: [],
                dialogVisible: false,
                formInline: {
                    condition: "",
                    state: "",
                    current: 1,
                    size: 4
                },
                check: {},
                coach: [],
                venueId: ""

            }
        },
        methods: {
            // 分页 - 更改每页条数
            handleSizeChange(val) {
                console.log(val)
                this.pageInfo.size = val
                this.query();
            },
            // 分页 - 更改当前页
            handleCurrentChange(val) {
                console.log(val)
                this.pageInfo.currentPage = val
                this.query();
            },
            getMyCoach(id) {
                axios.get("/coach/myCoach?venueId=" + id).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.coach = resp.data.data;
                    }
                })
            },
            bigger(row) {
                this.bigImg = row
                this.showBigImg = true
                console.log(row)
            },
            showCheck(row) {
                console.log(row);
                this.check = row;
                this.dialogVisible = true;
                this.venueId = row.venueId;
                this.getMyCoach(this.venueId)
            },
            findMyVenue() {
                axios.get("/venue/queryVenue", {
                    params: {
                        condition: this.check.venueId
                    }
                }).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.venue = resp.data.data.records;
                    }
                })
            },
            query() {
                axios.get("/venue/venues", {
                    params: {
                        condition: this.pageInfo.condition,
                        current: this.pageInfo.currentPage,
                        size: this.pageInfo.size
                    }
                }).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        console.log(resp.data.data);
                        this.venue = resp.data.data.records;
                        this.pageInfo.total = resp.data.data.total;
                    }
                })
            }
        },
        created() {
            this.query();
        }
    })
</script>
</body>
</html>